<template>
  <div class="jiagezhuizongbottom">
    <div id="jgzzdowm">
      <div style="height: 3%"></div>
      <div class="jgzztop">
        <div class="main" style="z-index: 99">
          <div style="width: 30%; height: 100%" @click="jgzzthirdpopupshow(0)">
            <div style="position: relative; text-align: center; height: 100%">
              <div style="position: relative; height: 55%; margin-top: 7%">
                <p
                  class="fontstyleznjb"
                  style="border-radius: 20px"
                  id="jgzzzgjj"
                >
                  {{ zgzbj || 0 }}
                </p>
                <img
                  src="../assets/zuigaoprice.png"
                  style="
                    position: absolute;
                    bottom: 0rem;
                    left: 18%;
                    right: 0px;
                    height: 100%;
                  "
                />
              </div>
              <p style="color: #182c56" id="jgzzzgzbdj">
                {{ zgzbjgtext || 0 }}
              </p>
            </div>
          </div>
          <div style="width: 30%; height: 100%" @click="jgzzthirdpopupshow(1)">
            <div
              style="
                position: relative;
                text-align: center;
                height: 100%;
                padding-top: 5%;
              "
            >
              <p
                class="fontstyleznjb"
                style="border-radius: 20px"
                id="jgzzzgjj"
              >
                {{ zdzbj || 0 }}
              </p>
              <div
                style="
                  height: 40%;
                  position: relative;
                  padding-top: 5%;
                  box-sizing: border-box;
                "
              >
                <img
                  src="../assets/zuidiprice.png"
                  style="
                    position: absolute;
                    top: 0rem;
                    left: 18%;
                    right: 0px;
                    height: 86%;
                  "
                />
                <p style="color: #182c56" id="jgzzzgzbdj">
                  {{ zdzbjgtext || 0 }}
                </p>
              </div>
            </div>
          </div>
          <div
            @click="jgzzthirdpopupshow(2)"
            style="
              width: 30%;
              height: 100%;
              padding-top: 1%;
              box-sizing: border-box;
              text-align: center;
            "
          >
            <p class="fontstyleznjb" style="border-radius: 20px" id="jgzzpjjj">
              {{ pjzbj || 0 }}
            </p>
            <p
              style="
                height: 2px;
                background-color: #182c56;
                width: 80%;
                margin: 0 auto;
                margin-bottom: 5%;
              "
            ></p>
            <p style="color: #182c56" id="jgzzpjzbdj">{{ pjzbjgtext || 0 }}</p>
          </div>
        </div>
        <div class="kuang"></div>
        <div class="left" style="">
          <div class="left1" style="">
            <div
              class="left2 left2wei1"
              :class="istype == '0' ? 'left2wei1check' : ''"
              @click="pricetype(0)"
            >
              固定价
            </div>
            <div
              class="left2 left2wei2"
              :class="istype == '1' ? 'left2wei2check' : ''"
              @click="pricetype(1)"
            >
              浮动价
            </div>
            <div
              class="left2 left2wei3"
              :class="istype == '2' ? 'left2wei3check' : ''"
              @click="pricetype(2)"
            >
              费率报价
            </div>
          </div>
          <div class="left3" style="">
            <div
              class="left4 left4wei1"
              :class="istime == '2' ? 'left4wei1check' : ''"
              @click="timerenge(2)"
            >
              近一个月
            </div>
            <div
              class="left4 left4wei2"
              :class="istime == '1' ? 'left4wei2check' : ''"
              @click="timerenge(1)"
            >
              近15天
            </div>
            <div
              class="left4 left4wei3"
              :class="istime == '0' ? 'left4wei3check' : ''"
              @click="timerenge(0)"
            >
              近7天
            </div>
          </div>
        </div>
        <div class="right">
          <div class="flexclassaround" style="width: 18%">
            <p style="font-size: 0.7rem">地区:</p>
            <SeleceTree
              :treeData="seconddiqulist"
              :info="areacode"
              :title="areatext"
              :defaultProps="optionPropsdq"
              style="flex: 1"
              @getChildValue="getChildValue"
            />
            <!-- <div class="myselect2" style="flex: 1">
              <el-cascader
                :options="seconddiqulist"
                :props="optionPropsdq"
                v-model="areacode"
                @change="getTreeData"
                clearable
              ></el-cascader>
              <div class="lineheng"></div>
            </div> -->
          </div>
          <div class="flexclassaround" style="width: 40%">
            <p style="font-size: 0.7rem">付款方式:</p>
            <div style="flex: 1">
              <div style="display: flex">
                <div class="myselectjgzz2" style="width: 50%">
                  <Select v-model="fkfscode" clearable placeholder="请选择">
                    <el-option
                      v-for="item in flssoptions"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </Select>
                  <div class="lineheng"></div>
                </div>
                <div class="myselectjgzzb" style="width: 50%">
                  <Select v-model="fkfscodebfb" clearable placeholder="请选择">
                    <el-option
                      v-for="item in flssbfboptions"
                      :key="item.name"
                      :label="item.name"
                      :value="item.name"
                    >
                    </el-option>
                  </Select>
                  <div class="lineheng"></div>
                </div>
              </div>
            </div>
          </div>
          <div class="flexclassaround" style="width: 18%">
            <p style="font-size: 0.7rem">分类:</p>
            <div
              class="myselectjgzz2"
              style="flex: 1"
              v-if="secondcatelist.length > 0"
            >
              <Select
                v-model="flcode"
                clearable
                placeholder="请选择"
                @change="slectchange"
                v-if="flshow"
              >
                <el-option
                  v-for="item in secondcatelist"
                  :key="item.materialclasscode"
                  :label="item.title"
                  :value="item.materialclasscode"
                >
                </el-option>
              </Select>
              <Select clearable placeholder="请选择" v-else>
                <el-option label="" value=""> </el-option>
              </Select>
              <div class="lineheng"></div>
            </div>
            <div class="myselectjgzz2" style="flex: 1" v-else>
              <Select
                clearable
                placeholder="请选择"
                @change="slectchange"
                v-if="flshow"
              >
                <el-option
                  v-for="item in secondcatelist"
                  :key="item.materialclasscode"
                  :label="item.title"
                  :value="item.materialclasscode"
                >
                </el-option>
              </Select>
              <Select clearable placeholder="请选择" v-else>
                <el-option label="" value=""> </el-option>
              </Select>
              <div class="lineheng"></div>
            </div>
          </div>
          <div class="flexclassaround" style="width: 18%">
            <p style="font-size: 0.7rem">物料:</p>
            <SeleceTree
              :treeData="secondwllist"
              :info="wlcode"
              :title="wlcodetext"
              :defaultProps="optionProps"
              style="flex: 1"
              @getChildValue="getChildValue"
            />

            <!-- <div class="myselect2" style="flex: 1">
              <el-cascader
                ref="elcascader"
                :options="secondwllist"
                :props="optionProps"
                v-model="wlcode"
                @change="getTreeData"
                @expand-change="elCascaderOnlick"
                clearable
              ></el-cascader>
              <div class="lineheng"></div>
            </div> -->
          </div>
        </div>
        <div class="round">
          <img src="../assets/yuan.png" style="height: 100%; width: 100%" />
        </div>
        <div class="round1" @click="jgzzthirdpopupshow(3)" style="z-index: 99">
          <p class="fontstyle">{{ zxzbj || 0 }}</p>
          <hr style="background-color: #fff; height: 1px; width: 80%" />
          <p id="jgzzzxzbdj">{{ zxzbjgtext || "" }}</p>
        </div>
      </div>
      <div class="bottoma" style="position: relative">
        <div class="jgzzbottoma">
          <div
            v-for="(item, index) in jgzzechartslist"
            :key="index"
            style="display: flex; align-items: center"
          >
            <div
              class="bottomc"
              :style="{
                background:
                  index == 0
                    ? 'linear-gradient(to top, rgba(24, 44, 86, 0.8), red)'
                    : index == 1
                    ? 'linear-gradient(to top,rgba(24, 44, 86, 0.8),green)'
                    : 'linear-gradient(to top,rgba(24, 44, 86, 0.8),#182c56)',
              }"
            ></div>
            <div>{{ item }}</div>
          </div>
        </div>
        <Echart
          ref="jgzzfb"
          id="jgzzfb"
          :options="jgzzfboptions"
          height="100%"
          width="100%"
        ></Echart>
      </div>
    </div>
    <Dialogback :modalVisible="szjythirdpopvisiable" :title="poptitle">
      <template>
        <div style="width: 98%; height: 100%; margin: 0 auto">
          <div style="height: 80%; padding-top: 3%" class="lenthten">
            <Tablecomponentsjgzz
              :tableData="tableData"
              :currentPage="avgpagenum"
              :headerlist="headerlistjgzz"
            />
            <!-- <el-table
              :data="tableData"
              height="100%"
              ref="jgzzjjtable"  
              style="width: 100%; background-color: transparent"
              :cell-style="{ fontSize: '1rem', textAlign: 'center' }"
              :header-cell-style="{
                textAlign: 'center',
                background: '#192c55',
                color: 'white',
              }"
              :row-class-name="tableRowClassName"
            >
              <el-table-column prop="date" label="序号" width="50">
                <template slot-scope="scope">
                  <span>{{ (avgpagenum - 1) * 10 + scope.$index + 1 }}</span>
                </template>
              </el-table-column>
              <el-table-column prop="materialname" label="清单名称" width="200">
              </el-table-column>
              <el-table-column
                prop="specification"
                label="规格/项目"
                width="200"
              >
              </el-table-column>
              <el-table-column prop="unit" label="单位"> </el-table-column>
              <el-table-column prop="planquantity" label="数量" width="200">
              </el-table-column>
              <el-table-column prop="price" label="单价(元)" width="200">
              </el-table-column>
              <el-table-column prop="totalprice" label="合计(元)" width="200">
              </el-table-column>
              <el-table-column prop="suppliername" label="供应商" width="400">
              </el-table-column>
              <el-table-column prop="area" label="地区" width="400">
              </el-table-column>
              <el-table-column prop="settlement" label="付款条件" width="200">
              </el-table-column>
              <el-table-column
                prop="suppliercreatedate"
                label="结果发布时间"
                width="300"
              >
              </el-table-column>
              <el-table-column prop="procunitname" label="采购单位" width="400">
              </el-table-column>
              <el-table-column prop="tenderremark" label="备注" width="400">
              </el-table-column>
            </el-table> -->
          </div>
          <el-pagination
            v-if="avgshow"
            background
            align="center"
            @current-change="alldatacurrentpage"
            :current-page="avgpagenum"
            page-size="10"
            layout="total,prev,pager,next,jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </template>
    </Dialogback>
  </div>
</template>

<script>
import APIS from "@/api/index";
import { Message } from "element-ui";
import Dialogback from "@/components/dialogback.vue";
import SeleceTree from "@/components/selece-tree.vue";
import Echart from "@/common/echart";
import { getData, timestampToTime } from "@/utils/common";
import Tablecomponentsjgzz from "@/components/tablecomponentsjgzz.vue";
import Select from "@/components/select/index.js";

import * as echarts from "echarts";
export default {
  props: {},
  components: { Dialogback, Echart, SeleceTree, Tablecomponentsjgzz, Select },
  data() {
    return {
      headerlistjgzz: [
        "清单名称",
        "规格/项目",
        "单位",
        "数量",
        "单价(元)",
        "合计(元)",
        "供应商",
        "地区",
        "付款条件",
        "结果发布时间",
        "采购单位",
        "备注",
      ],
      selectcount: true,
      flshow: false,
      wlcodetext: "商品混凝土",
      zgzbjgtext: "最高中标单价/(元)",
      zdzbjgtext: "最低中标单价/(元)",
      pjzbjgtext: "平均中标单价/(元)",
      zxzbjgtext: "最新中标单价/(元)",
      zxzbj: "0",
      zgzbj: "0",
      zdzbj: "0",
      pjzbj: "0",
      seconddiqulist: [],
      // seconddiqulist: [
      //   {
      //     areaid: "C01",
      //     areacode: "C01",
      //     title: "华北区",
      //     level: 0,
      //     pid: "",
      //     children: [
      //       {
      //         areaid: "C0111",
      //         areacode: "C0111",
      //         title: "北京市",
      //         level: 1,
      //         pid: "C01",
      //         children: [
      //           {
      //             areaid: "C011101",
      //             areacode: "C011101",
      //             title: "辖区",
      //             level: 2,
      //             pid: "C0111",
      //             children: [
      //               {
      //                 areaid: "C01110101",
      //                 areacode: "C01110101",
      //                 title: "东城区",
      //                 level: 3,
      //                 pid: "C011101",
      //                 children: [],
      //               },
      //               {
      //                 areaid: "C01110116",
      //                 areacode: "C01110116",
      //                 title: "怀柔区",
      //                 level: 3,
      //                 pid: "C011101",
      //                 children: [],
      //               },
      //             ],
      //           },
      //         ],
      //       },
      //     ],
      //   },
      // ],
      optionPropsdq: {
        value: "areacode",
        label: "title",
        children: "children",
      },
      optionProps: {
        value: "materialclasscode",
        label: "title",
        children: "children",
      },
      secondwllist: [],
      secondcatelist: [],
      areacode: "",
      fkfscode: "",
      fkfscodebfb: [],
      flssoptions: [],
      flssbfboptions: [],
      flcode: "80",
      wlcode: "802901", // ["8029", "802901"]
      jgzzfboptions: {},
      istype: 2,
      istime: 2,
      defaultProps: {
        children: "children",
        label: "title",
      },
      currentPage: 1, //当前页
      szjythirdpopvisiable: false,
      szjythirdpopvisiablebig: false,
      poptitle: "价格追踪",
      total: 0,
      criteriaT: { days: 1, a1: "", a2: "", a3: "", a4: "", a5: "" },
      icon: require("@/assets/shuzijiaoyipopupbottomdown.png"),
      fkfsobj: {},
      dianjicheck: true,
      tableData: [],
      avgpagenum: 1,
      avgshow: false,
      clicktype: 0,
      redertime: 0,
      paymentlist: [],
      jgzzechartslist: ["最高报价/(%)", "最低报价/(%)", "平均浮动比例/(%)"],
      areatext: "",
      widthshow: false,
      fkfsfirstobj: {},
    };
  },
  watch: {
    jgzzechartslist(newVal, oldVal) {
      console.log(newVal, "new");
    },
    fkfscode(newVal, oldVal) {
      // if (!newVal) {
      //   return;
      // }
      this.fkfscodebfb = "";
      this.fkfsobj = {};
      this.fkfsfirstobj = {};
      this.flssbfboptions = [];

      // this.fkfscodebfb = ""
      if (newVal != "") {
        this.getpaymentPercent({ paymentName: newVal });
        let obj = this.flssoptions.filter((item) => item.name == newVal);
        this.fkfsfirstobj = obj[0];
      }

      this.getpriceanalyise();
      this.getPriceAnalysis();

      console.log(this.flssoptions, "flssoptions");
    },
    flcode(newVal, oldVal) {
      if (!newVal) {
        this.wlcode = [];
        this.secondwllist = [];
        this.wlcode = "";
        this.wlcodetext = "";
        return;
      }
      // if (newVal != oldVal) {
      //   this.wlcode = "";
      //   this.wlcodetext = "";
      // }

      let obj = this.secondcatelist.filter(
        (item) => item.materialclasscode == newVal
      );

      if (obj.length > 0) {
        this.getmat({
          pid: obj[0].materialclassid,
          materialclasscode: newVal,
          offerType: this.istype + 1,
        });
      }
      // selectcount false控制两次切换以及以后切换选择判断是否清空
      if (this.istype == 2 && newVal == "04") {
        this.wlcode = "";
        this.wlcodetext = "";
      }

      if (this.istype == 2 && newVal == "80") {
        if (!this.selectcount) {
          this.wlcode = "";
          this.wlcodetext = "";
        }
      } else {
        if (!this.selectcount) {
          this.wlcode = "";
          this.wlcodetext = "";
        }
      }

      //
      // if (this.istype == 0 && newVal == "04") {
      //   if (!this.selectcount) {
      //     this.wlcode = "";
      //     this.wlcodetext = "";
      //   }
      // } else {
      //   this.wlcode = "";
      //   this.wlcodetext = "";
      // }
    },
    fkfscodebfb(newVal, oldVal) {
      if (!newVal) {
        return;
      }
      let obj = this.flssbfboptions.filter((item) => item.name == newVal);

      this.fkfsobj = obj[0];
      this.getpriceanalyise();
      if (this.istype == 2) {
        this.getPriceAnalysis(2);
      } else {
        this.getPriceAnalysis();
      }
    },
    wlcode(newVal, oldVal) {
      if (!newVal || newVal == undefined) {
        this.wlcode = "";
        this.wlcodetext = "";
        return;
      }
    },
    areacode(newVal, oldVal) {
      if (!newVal || newVal == undefined) {
        this.areacode = "";
        this.areatext = "";
      }
    },
  },
  mounted() {
    if (window.devicePixelRatio > 1.5) {
      this.widthshow = true;
    }

    this.getpriceanalyise();
    this.getarea();
    this.getpayment();
    this.getshoucirender();

    // this.getmat({
    //   pid: "b38e5ff5f816ac6e4169bce9314b2996",
    //   materialclasscode: "80",
    // });

    this.pricetype(2);
  },
  methods: {
    slectchange(val) {
      this.selectcount = false;
    },
    getChildValue(val) {
      if (val.type != 2 && !val.value) {
        return;
      }
      if (val.type == 2) {
        this.areacode = val.value;
        this.areatext = val.title;
        this.getpriceanalyise();
        if (this.istype == 2) {
          this.getPriceAnalysis(2);
        } else {
          this.getPriceAnalysis();
        }
        console.log(this.areatext, "this.areatext");
      } else {
        this.wlcode = val.value;
        this.wlcodetext = val.title;
        if (val.value) {
          this.getpriceanalyise();
          if (this.istype == 2) {
            this.getPriceAnalysis(2);
          } else {
            this.getPriceAnalysis();
          }
        }
      }
    },
    alldatacurrentpage(currentPage) {
      // this.$refs.jgzzjjtable.bodyWrapper.scrollTop = 0;
      this.avgpagenum = currentPage;
      this.getdetailprice(this.clicktype);
      // this.searchtable();
    },
    getdetailprice(index) {
      this.avgshow = false;
      // let wlcode = [];
      // if (this.wlcode.length > 1) {
      //   wlcode = this.wlcode[this.wlcode.length - 1];
      // } else {
      //   wlcode = this.wlcode[0];
      // }
      // let areacode = [];
      // if (this.areacode.length > 1) {
      //   areacode = this.areacode[this.areacode.length - 1];
      // } else {
      //   areacode = this.areacode[0];
      // }
      let startRatio = null;
      let endRatio = null;

      let date1 = ""; //前推7天

      if (this.istime == 0) {
        date1 = getData(-7);
      } else if (this.istime == 1) {
        date1 = getData(-15);
      } else if (this.istime == 2) {
        date1 = getData(-30);
      }

      console.log(this.fkfsobj, "detailprice");

      if (this.fkfsobj.id) {
        if (this.fkfsobj.id.endRatio == null) {
          endRatio = this.fkfsobj.id.startRatio;
        } else {
          startRatio = this.fkfsobj.id.startRatio;
          endRatio = this.fkfsobj.id.endRatio;
        }
      }

      let data = {
        matCode: this.wlcode || this.wlcode[0],
        areaCode: this.areacode,
        paymentName: this.fkfscode,
        pageNum: this.avgpagenum,
        pageSize: 10,
        priceType: this.istype + 1,
        startDate: date1,
        endDate: timestampToTime(),
        startRatio: startRatio,
        endRatio: endRatio,
      };

      if (index == 0) {
        console.log("最高价格");
        APIS.Jgzz.maxPriceData(data)
          .then((res) => {
            if (res.data.length > 0) {
              res.data.map((item) => {
                for (let key in this.paymentlist) {
                  if (item.settlement == this.paymentlist[key]) {
                    item.settlement = key;
                  }
                }
              });
            }
            this.tableData = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (index == 1) {
        console.log("最低价格");
        APIS.Jgzz.minPriceData(data)
          .then((res) => {
            if (res.data.length > 0) {
              res.data.map((item) => {
                for (let key in this.paymentlist) {
                  if (item.settlement == this.paymentlist[key]) {
                    item.settlement = key;
                  }
                }
              });
            }

            this.tableData = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (index == 2) {
        console.log("平均价格");
        APIS.Jgzz.avgPriceData(data)
          .then((res) => {
            if (res.data.items.length > 0) {
              res.data.items.map((item) => {
                for (let key in this.paymentlist) {
                  if (item.settlement == this.paymentlist[key]) {
                    item.settlement = key;
                  }
                }
              });
            }
            this.tableData = res.data.items || [];
            this.avgshow = true;
            this.total = res.data.total || 0;
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (index == 3) {
        console.log("最新价格");
        APIS.Jgzz.newPriceData(data)
          .then((res) => {
            if (res.data.length > 0) {
              res.data.map((item) => {
                for (let key in this.paymentlist) {
                  if (item.settlement == this.paymentlist[key]) {
                    item.settlement = key;
                  }
                }
              });
            }
            this.tableData = res.data;
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    getPriceAnalysis(num) {
      this.redertime = 2;
      let xdata = [];
      let ydata1 = [];
      let ydata2 = [];
      let ydata3 = [];
      // fixedPriceAnalysis
      let startRatio = null;
      let endRatio = null;
      let date1 = ""; //前推7天
      if (this.istime == 0) {
        date1 = getData(-7);
      } else if (this.istime == 1) {
        date1 = getData(-15);
      } else if (this.istime == 2) {
        date1 = getData(-30);
      }

      if (this.fkfsobj.id) {
        // if (this.fkfsobj.id.endRatio == null) {
        //   endRatio = this.fkfsobj.id.startRatio;
        // } else {
        startRatio = this.fkfsobj.id.startRatio;
        endRatio = this.fkfsobj.id.endRatio;
        // }
      }
      // let wlcode = [];
      // if (this.wlcode.length > 1) {
      //   wlcode = this.wlcode[this.wlcode.length - 1];
      // } else {
      //   wlcode = this.wlcode[0];
      // }

      // let areacode = [];
      // if (this.areacode.length > 1) {
      //   areacode = this.areacode[this.areacode.length - 1];
      // } else {
      //   areacode = this.areacode[0];
      // }

      let data = {
        // type: 1,
        matCode: this.wlcode || this.wlcode[0],
        areaCode: this.areacode,
        paymentName: this.fkfscode,
        paymentCode: this.fkfsfirstobj.id - 0 || null,
        areaName: this.areatext,
        startRatio: startRatio,
        endRatio: endRatio,
        startDate: date1,
        endDate: timestampToTime(),
      };

      let myChart = echarts.init(document.getElementById("jgzzfb"));

      if (this.istype == 0) {
        //固定
        APIS.Jgzz.fixedMonthPriceAnalysis(data).then((res) => {
          if (res.data == null || res.data.length == 0) {
            xdata = [];
            ydata1 = [];
            ydata2 = [];
            ydata3 = [];
          } else {
            res.data.map((item) => {
              xdata.push(item.sky);
              ydata1.push(item.maxunitprice);
              ydata2.push(item.minunitprice);
              ydata3.push(item.avgunitprice);
            });
          }

          myChart.setOption({
            xAxis: [
              {
                data: xdata,
              },
            ],
            series: [
              {
                name: "最高中标单价/(元)",
                data: ydata1,
              },
              {
                name: "最低中标单价/(元)",
                data: ydata2,
              },
              {
                name: "平均中标单价/(元)",
                data: ydata3,
              },
            ],
          });

          window.addEventListener("resize", function () {
            myChart.resize();
          });
        });
      } else if (this.istype == 1) {
        //浮动
        APIS.Jgzz.floatMonthPriceAnalysis(data).then((res) => {
          if (res.data == null || res.data.length == 0) {
            xdata = [];
            ydata1 = [];
            ydata2 = [];
            ydata3 = [];
          } else {
            res.data.map((item) => {
              xdata.push(item.sky);
              ydata1.push(item.maxunitprice);
              ydata2.push(item.minunitprice);
              ydata3.push(item.avgunitprice);
            });
          }

          myChart.setOption({
            xAxis: [
              {
                data: xdata,
              },
            ],
            series: [
              {
                name: "最高浮动价/(元)",
                data: ydata1,
              },
              {
                name: "最低浮动价/(元)",
                data: ydata2,
              },
              {
                name: "浮动均价/(元)",
                data: ydata3,
              },
            ],
          });
        });
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      } else if (this.istype == 2) {
        //费率
        APIS.Jgzz.rateMonthPriceAnalysis(data).then((res) => {
          if (res.data == null || res.data.length == 0) {
            xdata = [];
            ydata1 = [];
            ydata2 = [];
            ydata3 = [];
          } else {
            res.data.map((item) => {
              xdata.push(item.sky);
              ydata1.push(item.maxunitprice);
              ydata2.push(item.minunitprice);
              ydata3.push(item.avgunitprice);
            });
          }

          myChart.setOption({
            xAxis: [
              {
                data: xdata,
              },
            ],
            series: [
              {
                name: "最高报价/(%)",
                data: ydata1,
              },
              {
                name: "最低报价/(%)",
                data: ydata2,
              },
              {
                name: "平均浮动比例/(%)",
                data: ydata3,
              },
            ],
          });
        });
        window.addEventListener("resize", function () {
          myChart.resize();
        });
      }
    },
    getshoucirender() {
      this.redertime = 2;
      let xdata = [];
      let ydata1 = [];
      let ydata2 = [];
      let ydata3 = [];
      // fixedPriceAnalysis
      let startRatio = null;
      let endRatio = null;
      let date1 = ""; //前推7天
      if (this.istime == 0) {
        date1 = getData(-7);
      } else if (this.istime == 1) {
        date1 = getData(-15);
      } else if (this.istime == 2) {
        date1 = getData(-30);
      }

      if (this.fkfsobj.id) {
        if (this.fkfsobj.id.endRatio == null) {
          endRatio = this.fkfsobj.id.startRatio;
        } else {
          startRatio = this.fkfsobj.id.startRatio;
          endRatio = this.fkfsobj.id.endRatio;
        }
      }
      // let wlcode = [];
      // if (this.wlcode.length > 1) {
      //   wlcode = this.wlcode[this.wlcode.length - 1];
      // } else {
      //   wlcode = this.wlcode[0];
      // }

      // let areacode = [];
      // if (this.areacode.length > 1) {
      //   areacode = this.areacode[this.areacode.length - 1];
      // } else {
      //   areacode = this.areacode[0];
      // }

      let data = {
        // type: 1,
        matCode: this.wlcode || this.wlcode[0],
        areaCode: this.areacode,
        paymentName: this.fkfscode,
        areaName: this.areatext,
        startRatio: startRatio,
        endRatio: endRatio,
        startDate: date1,
        endDate: timestampToTime(),
      };
      APIS.Jgzz.rateMonthPriceAnalysis(data).then((res) => {
        res.data.map((item) => {
          xdata.push(item.sky);
          ydata1.push(item.maxunitprice);
          ydata2.push(item.minunitprice);
          ydata3.push(item.avgunitprice);
        });
        this.linejgzzfb(xdata, ydata1, ydata2, ydata3);
      });
    },
    getpriceanalyise() {
      // fixedPriceAnalysis
      let startRatio = null;
      let endRatio = null;
      let date1 = ""; //前推7天

      if (this.istime == 0) {
        date1 = getData(-7);
      } else if (this.istime == 1) {
        date1 = getData(-15);
      } else if (this.istime == 2) {
        date1 = getData(-30);
      }

      if (this.fkfsobj.id) {
        // if (this.fkfsobj.id.endRatio == null) {
        //   endRatio = this.fkfsobj.id.startRatio;
        // } else {
        startRatio = this.fkfsobj.id.startRatio;
        endRatio = this.fkfsobj.id.endRatio;
        // }
      }
      // let wlcode = [];
      // if (this.wlcode.length > 1) {
      //   wlcode = this.wlcode[this.wlcode.length - 1];
      // } else {
      //   wlcode = this.wlcode[0];
      // }

      // let areacode = [];
      // if (this.areacode.length > 1) {
      //   areacode = this.areacode[this.areacode.length - 1];
      // } else {
      //   areacode = this.areacode[0];
      // }

      console.log(this.fkfsfirstobj, "fkfsfirstobj");

      let data = {
        // type: 1,
        matCode: this.wlcode || this.wlcode[0],
        areaCode: this.areacode,
        paymentName: this.fkfscode,
        paymentCode: this.fkfsfirstobj.id - 0 || null,
        areaName: this.areatext,
        startRatio: startRatio,
        endRatio: endRatio,
        startDate: date1,
        endDate: timestampToTime(),
      };
      if (this.istype == 0) {
        //固定
        APIS.Jgzz.fixedPriceAnalysis(data).then((res) => {
          if (res.data == null) {
            this.zxzbj = 0;
            this.pjzbj = 0;
            this.zdzbj = 0;
            this.zgzbj = 0;
          } else {
            this.zxzbj = res.data.newunitprice || 0;
            this.zgzbj = res.data.maxunitprice || 0;
            this.zdzbj = res.data.minunitprice || 0;
            this.pjzbj = res.data.avgunitprice || 0;
          }
        });
      } else if (this.istype == 1) {
        //浮动
        APIS.Jgzz.floatPriceAnalysis(data).then((res) => {
          if (res.data == null) {
            this.zxzbj = 0;
            this.pjzbj = 0;
            this.zdzbj = 0;
            this.zgzbj = 0;
          } else {
            this.zxzbj = res.data.newunitprice || 0;
            this.zgzbj = res.data.maxunitprice || 0;
            this.zdzbj = res.data.minunitprice || 0;
            this.pjzbj = res.data.avgunitprice || 0;
          }
        });
      } else if (this.istype == 2) {
        //费率
        APIS.Jgzz.ratePriceAnalysis(data).then((res) => {
          if (res.data == null) {
            this.zxzbj = 0;
            this.pjzbj = 0;
            this.zdzbj = 0;
            this.zgzbj = 0;
          } else {
            this.zxzbj = res.data.newunitprice || 0;
            this.zgzbj = res.data.maxunitprice || 0;
            this.zdzbj = res.data.minunitprice || 0;
            this.pjzbj = res.data.avgunitprice || 0;
          }
        });
      }
    },
    getarea() {
      APIS.Baseapi.area()
        .then((res) => {
          this.seconddiqulist = res.data;
          // this.seconddiqulist = this.getTreeData(res.data);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getpayment() {
      let arr = [];
      APIS.Baseapi.payment()
        .then((res) => {
          this.paymentlist = res.data;
          for (let key in res.data) {
            arr.push({ id: res.data[key], name: key });
          }
          this.flssoptions = [...arr];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmatClassify(data) {
      APIS.Baseapi.matClassify(data)
        .then((res) => {
          this.secondcatelist = res.data;
          this.flshow = true;
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getmat(data) {
      APIS.Baseapi.mat(data)
        .then((res) => {
          // if(this.istype == 1){
          //   this.secondwllist = this.getTreeData(res.data);
          // }else{
          this.secondwllist = res.data;
          // this.secondwllist = this.getTreeData(res.data);
          // }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    getTreeData(data) {
      for (var i = 0; i < data.length; i++) {
        if (data[i].children.length < 1) {
          // children若为空数组，则将children设为undefined

          data[i].children = undefined;
        } else {
          this.getTreeData(data[i].children);
        }
      }

      return data;
    },
    getpaymentPercent(data) {
      let arr = [];
      APIS.Baseapi.paymentPercent(data)
        .then((res) => {
          for (let key in res.data) {
            arr.push({ id: res.data[key], name: key });
          }
          this.flssbfboptions = [...arr];
        })
        .catch((err) => {
          console.log(err);
        });
    },
    timerenge(index) {
      this.istime = index;
      this.getpriceanalyise();
      this.getPriceAnalysis();
    },
    pricetype(index) {
      // if (this.areacode) {
      //   this.areacode = "";
      //   this.areatext = "";
      // }
      // if (this.fkfscode) {
      //   this.fkfscode = "";
      // }
      // if (this.fkfscodebfb) {
      //   this.fkfscodebfb = "";
      // }

      // this.wlcode = [];
      this.flshow = false;
      this.selectcount = true;

      this.getmatClassify({ offerType: index + 1 });

      this.istype = index;
      if (index == 0) {
        this.jgzzechartslist = [
          "最高中标单价/(元)",
          "最低中标单价/(元)",
          "平均中标单价/(元)",
        ];
        this.zgzbjgtext = "最高中标单价/(元)";
        this.zdzbjgtext = "最低中标单价/(元)";
        this.pjzbjgtext = "平均中标单价/(元)";
        this.zxzbjgtext = "最新中标单价/(元)";
        this.zxzbj = "0";
        this.zgzbj = "0";
        this.zdzbj = "0";
        this.pjzbj = "0";
        this.getmat({
          pid: "c15da1f2b5e5ed6e6837a3802f0d1593",
          materialclasscode: "04",
          offerType: index + 1,
        });

        this.flcode = "04";
        this.wlcode = "0415";
        this.wlcodetext = "砌块";

        this.getpriceanalyise();
        this.getPriceAnalysis();
      } else if (index == 1) {
        this.jgzzechartslist = [
          "最高浮动价/(元)",
          "最低浮动价/(元)",
          "浮动均价/(元)",
        ];
        this.zgzbjgtext = "最高浮动价/(元)";
        this.zdzbjgtext = "最低浮动价/(元)";
        this.pjzbjgtext = "浮动均价/(元)";
        this.zxzbjgtext = "最新浮动价/(元)";
        this.zxzbj = "0";
        this.zgzbj = "0";
        this.zdzbj = "0";
        this.pjzbj = "0";

        this.flcode = "01";
        this.wlcode = "0101";
        this.wlcodetext = "钢筋";

        this.getmat({
          pid: "665f644e43731ff9db3d341da5c827e1",
          materialclasscode: "01",
          offerType: index + 1,
        });

        this.getpriceanalyise();
        this.getPriceAnalysis();
        // ["0101"];
      } else if (index == 2) {
        this.jgzzechartslist = [
          "最高报价/(%)",
          "最低报价/(%)",
          "平均浮动比例/(%)",
        ];
        this.zgzbjgtext = "最高报价/(%)";
        this.zdzbjgtext = "最低报价/(%)";
        this.pjzbjgtext = "平均浮动比例/(%)";
        this.zxzbjgtext = "最新报价/(%)";
        this.zxzbj = "0";
        this.zgzbj = "0";
        this.zdzbj = "0";
        this.pjzbj = "0";

        this.getmat({
          pid: "b38e5ff5f816ac6e4169bce9314b2996",
          materialclasscode: "80",
          offerType: index + 1,
        });

        this.flcode = "80";
        this.wlcode = "802901";
        this.wlcodetext = "商品混凝土";

        // ["8029", "802901"];
        this.getpriceanalyise();
        this.getPriceAnalysis();
      }
    },
    getjgzztabs(e) {
      this.criteriaT.days = e;
    },
    tableRowClassName({ row, rowIndex }) {
      if (rowIndex % 2 != 0) {
        return "warning-row";
      } else {
        return "success-row";
      }
    },
    linejgzzfb(xdata, ydata1, ydata2, ydata3) {
      this.jgzzfboptions = {
        tooltip: {
          trigger: "axis",
          formatter: function (params) {
            var res = `  
			    <p>${params[0].axisValue}</p>
                <span
                  style="display:inline-block;
                    margin-right:5px;
                    border-radius:10px;
                    width:10px;
                    height:10px;
                    background:linear-gradient(180deg, ${params[0].color.colorStops[1].color} 0%, ${params[0].color.colorStops[0].color} 100%)"
                    ></span><span>${params[0].seriesName}: ${params[0].data}</span>
              </div>
			  <div>
			  <span
			  style="display:inline-block;
				margin-right:5px;
				border-radius:10px;
				width:10px;
				height:10px;
				background:linear-gradient(180deg, ${params[1].color.colorStops[1].color} 0%, ${params[1].color.colorStops[0].color} 100%)" 
			  ></span><span>${params[1].seriesName}: ${params[1].data}</span>
			</div>
			<div>
			  <div>
                <span
                  style="display:inline-block;
                    margin-right:5px;
                    border-radius:10px;
                    width:10px;
                    height:10px;
					background:linear-gradient(180deg, ${params[2].color.colorStops[1].color} 0%, ${params[2].color.colorStops[0].color} 100%)" 
                ></span><span>${params[2].seriesName}: ${params[2].data}</span>
              </div>
                `;
            return res;
          },
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: xdata,
            axisLabel: {
              textStyle: {
                color: "#182c56",
                fontSize: 14,
                fontWeight: 400,
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#182c56",
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            boundaryGap: false,
            axisTick: {
              //坐标轴刻度
              show: false,
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#182c56",
                fontSize: 14,
                fontWeight: 400,
              },
            },
            splitLine: {
              show: false,
              lineStyle: {
                color: "rgba(32, 92, 90, 1)",
              },
            },
            axisLine: {
              show: false,
              lineStyle: {
                color: "rgba(218, 218, 218, 0.4)",
              },
            },
          },
        ],
        series: [
          {
            name: "最高中标单价/(元)",
            type: "bar",
            barWidth: 10,
            barGap: 1,
            data: ydata1,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  //只要修改前四个参数就ok
                  offset: 0,
                  color: "rgba(24,44,86,0.8)",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "red",
                },
              ]),
            },
          },
          {
            name: "最低中标单价/(元)",
            type: "bar",
            barWidth: 10,
            barGap: 1,
            data: ydata2,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  //只要修改前四个参数就ok
                  offset: 0,
                  color: "rgba(24,44,86,0.8)",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "green",
                },
              ]),
            },
          },
          {
            name: "平均中标单价/(元)",
            type: "bar",
            barWidth: 10,
            barGap: 1,
            data: ydata3,
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [
                {
                  //只要修改前四个参数就ok
                  offset: 0,
                  color: "rgba(24,44,86,0.8)",
                }, //柱图渐变色
                {
                  offset: 1,
                  color: "#182c56",
                },
              ]),
            },
          },
        ],
      };
    },
    // 弹窗开启
    jgzzthirdpopupshow(index) {
      this.avgpagenum = 1;
      // 0 最高 1 最低 2 平均  3 最新zxzbj: "0",
      // zgzbj: "0",
      // zdzbj: "0",
      // pjzbj: "0",
      if (
        this.zgzbj == 0 &&
        this.zdzbj == 0 &&
        this.pjzbj == 0 &&
        this.zxzbj == 0
      ) {
        return;
      }

      // 0 最高 1 最低 2 平均  3 最新

      this.clicktype = index;
      this.poptitle = "";
      this.szjythirdpopvisiable = true;
      this.getdetailprice(index);
    },
    // 关闭
    closepopup() {
      this.poptitle = "";
      this.szjythirdpopvisiable = false;
    },
  },
};
</script>
// 这种引入确保样式只在该组件生效
<style src="@/assets/css/public.css" scoped></style>
<style lang="scss">
.lenthten {
  .el-table__body {
    height: 100%;
  }
}
</style>
<style lang="scss" scoped>
.jiagezhuizongbottom {
  width: 98%;
  box-sizing: border-box;
  margin: 0 auto;
  height: 100%;
  position: relative;
  scroll-behavior: smooth;
  overflow: hidden;
  font-size: 1rem;
  .bottoma {
    height: 62%;
    width: 100%;
    margin-top: -1.5%;
    background-image: url("../assets/jgzzbottombg.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
  }
  .main {
    position: absolute;
    right: 3%;
    height: 70%;
    width: 65%;
    display: flex;
    align-items: center;
    justify-content: space-around;
    .fontstyleznjb {
      font-family: BSB;
      font-size: 3rem;
      color: #192c56;
      font-weight: 600;
    }
  }
  .kuang {
    width: 80vw;
    height: 70%;
    background-image: url("../assets/jgzsbgtop.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .right {
    width: 70%;
    height: 15%;
    position: absolute;
    top: -9%;
    left: 24%;
    display: flex;
    font-size: 0.8rem;
    justify-content: space-around;
    .flexclassaround {
      display: flex;
    }
  }
  .left {
    width: 25vw;
    height: 80%;
    position: absolute;
    display: flex;
    font-size: 0.8rem;
    .left1 {
      width: 50%;
      height: 100%;
      padding: 5%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .left2 {
        width: 100%;
        height: 30%;
        color: white;
        padding-left: 15%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        cursor: pointer;
      }
      .left2wei1 {
        background-image: url("../assets/lefttop.png");
      }
      .left2wei1check {
        background-image: url("../assets/topleftcheck.png");
      }
      .left2wei2 {
        background-image: url("../assets/leftmiddle.png");
      }
      .left2wei2check {
        background-image: url("../assets/leftmiddlecheck.png");
      }
      .left2wei3 {
        background-image: url("../assets/leftbottom.png");
      }
      .left2wei3check {
        background-image: url("../assets/topbottomcheeck.png");
      }
    }

    .left3 {
      width: 50%;
      height: 100%;
      padding: 5%;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;
      text-align: right;
      cursor: pointer;

      .left4 {
        width: 100%;
        height: 30%;
        color: white;
        padding-right: 8%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        background-size: 100% 100%;
        background-repeat: no-repeat;
      }
      .left4wei1 {
        background-image: url("../assets/rigttop.png");
      }
      .left4wei1check {
        background-image: url("../assets/righttopcheck.png");
      }
      .left4wei2 {
        background-image: url("../assets/rightmiddle.png");
      }
      .left4wei2check {
        background-image: url("../assets/rightmiddlecheck.png");
      }
      .left4wei3 {
        background-image: url("../assets/rightbottom.png");
      }
      .left4wei3check {
        background-image: url("../assets/rightbottomcheck.png");
      }
    }
  }
  .round {
    height: 12vw;
    position: absolute;
    left: 7vw;
    z-index: 9;
    width: 12vw;
  }
  .round1 {
    width: 12vw;
    height: 6vw;
    position: absolute;
    left: 7vw;
    z-index: 10;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    color: white;
  }
  #jgzzdowm {
    width: 100%;
    height: 100%;
    position: relative;
  }
  .checkselect {
    position: absolute;
    top: -3%;
    left: 14%;
    height: 10%;
    width: 85%;
    display: flex;
  }
  .info {
    width: 20%;
    display: flex;
    align-items: center;
    padding: 0.5rem 0 0.8rem;
    box-sizing: border-box;
    .lable {
      margin-right: 0.3rem;
    }
  }
  .info2 {
    display: flex;
    align-items: center;
    padding: 0.5rem 2rem 0.8rem 0;
    box-sizing: border-box;
    .lable {
      margin-right: 0.3rem;
    }
  }
}
::v-deep .public {
  .el-input__prefix {
    border: none;
  }
  .el-input__inner {
    .el-input__icon {
      display: none;
    }
    border: none;
    border-radius: 0;
    background-color: rgba(237, 241, 249, 1);
    color: #192c55;
  }
  .el-select__caret {
    color: #192c55 !important;
  }
}

::v-deep .el-button {
  background-color: #0000ff;
  color: white;
  position: relative;
  span {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}

// 水平位移动画
.transition-t {
  transform: translate(0, -100%);
  transition: all 1s;
}
.transition-b {
  transform: translate(0, 0);
  transition: all 1s;
}

.fontstyle {
  font-family: BSB;
  font-size: 2.9rem;
  background: -webkit-linear-gradient(59deg, #ffc346, #b3001e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 550;
}
.jgzzbottoma {
  position: absolute;
  right: 2%;
  top: 1%;
  display: flex;
  font-size: 14px;
  padding: 0.3%;
  font-size: 1rem;
}
.bottomc {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
::v-deep .myselectjgzz2 {
  width: 100%;
  position: relative;

  .el-icon-arrow-up:before {
    content: "▲";
    color: #0054f9;
  }
  .el-input__inner {
    font-family: JCYT;
    border: none;
    background-color: transparent;
    border-radius: 0;
  }
  .el-input {
    font-size: 0.8rem;
  }
  /* .el-input__suffix {
    width: 20px;
    height: 20px;
    color: #192c55;
    right: 1.3rem;
    top: calc(100% - 10px);
  } */
}
::v-deep .myselectjgzzb {
  width: 100%;
  .el-icon-arrow-up:before {
    content: "\0025";
    color: white;
    background-color: #0054f9;
  }
  .el-input__inner {
    font-family: JCYT;
    border: none;
    background-color: transparent;
    border-radius: 0;
  }
  .el-input {
    font-size: 0.8rem;
  }
}
</style>
